<template>
	<view class="friend_Page">
		<headerinfo></headerinfo>
		<u-navbar title="声音设置" leftIconColor="#fff" :placeholder="true" :bgColor="bgColor" :titleStyle="titleStyle"></u-navbar>

		<view class="noticelist">
			<view class="li">
				时长推荐 3~10秒;
			</view>
			<view class="li">
				推荐数据集中(人话:不要太多留白，留白对AI来说是废数据);
			</view>
			<view class="li">
				不要有噪音，除了你要需要的那个声音，其他的所有声音都是噪音;
			</view>
			<view class="li">
				吐字清晰，一个字一个字的咬准喽，不要连音;
			</view>
			<view class="li" style="font-weight: bold;">
				音频使用普通话，不要用方言;
			</view>
			
			<view class="tablist">
				<span :class="inv == 0?'act':''" @click="inv = 0">自己上传音频文件</span>
				<span :class="inv == 1?'act':''"  @click="inv = 1">使用录音</span>
			</view>
	<view class="form" v-if="inv == 0">
				<view class="title">
					<input type="text" placeholder="请输入音频对应的文本" v-model="usertext"/>
				</view>
				
			</view>
			<view class="form"  v-if="inv == 1">
				<view class="title">
					请在以下古诗中选择一条录音或上传音频
				</view>
				<view class="list" @click="gushidia = true">
					{{gushi?gushi:'请选择古诗'}} <i class="iconfont">&#xe606;</i>
				</view>
			</view>

			<view class="uplist" v-if="inv == 0">
				<view class="list" @click="uploadVideo" >
					<span>上传音频文件</span>
				</view>
			</view>
			<view class="uplist" v-if="inv == 1">
				<view class="list" @click="startluying">
					<span>开始录音</span>
				</view>
			</view>
			
			
		</view>


		<w-picker :visible.sync="gushidia" mode="selector" default-type="name" :default-props="selectdefaultProps"
			:options="gushilist" @confirm="langchecked($event)" ref="selector2"></w-picker>
			
			
		<u-popup :show="luyingdia"  mode="bottom" @close="luyingdia = false" background-color="#fff">
			<sound-recording @confirm="confirmVideo"></sound-recording>
		</u-popup>
	</view>
</template>

<script>
	import minxins from '../../common/upload.js';
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	export default {
		mixins: [minxins],
		components: {soundRecording},
		data() {
			return {
				luyingdia:false,
				familyMemberId: '',
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				selectdefaultProps: {
					label: "name",
					value: "id"
				},
				gushidia: false,
				gushilist: [],
				gushi: '',
				recorderManager: null,
				isRecording: false,
				inv:0,
				usertext:''
			};
		},
		onLoad(e) {
			if (e.familyMemberId) {
				this.familyMemberId = e.familyMemberId
			}
		},
		onShow() {
			this.getgushi()
		},
		mounted() {
			this.recorderManager = uni.getRecorderManager();
		},
		methods: {
			getgushi() {
				this.$api.getReadText().then(res => {
					console.log(res)

					var arr = [];
					for (var key in res) {
						arr.push({
							name: res[key],
							id: res[key]
						});
					}

					this.gushilist = arr

				})
			},
			langchecked(e) {
				this.gushi = e.value
			},
			uploadVideo() {
				
				if (!this.usertext) {
					return this.$Show.show('请填写音频文件对应的文本')
				}
				uni.chooseMessageFile({
					count: 1,   //选取的文件个数限制
					type:'file',
					success:(res)=>{
						// 获取到了音频文件
						const tempFilePaths = res.tempFiles[0].path;
						console.log(res)
						
						// 限制 300K
						var fileName = Date.now() + '_' + Math.round(Math.random() *
							100000000) + '.' + tempFilePaths.substring(tempFilePaths.lastIndexOf(
							'.') + 1)
						
						var familyId = uni.getStorageSync('familyId') ? uni
							.getStorageSync('familyId')[0] : ''
						
						this.uploadUserImage(tempFilePaths, 'image', fileName, familyId, (
							imgUrl) => {
						
							let data = {
								familyMemberId: this.familyMemberId,
								soundFile: imgUrl,
								soundText: this.usertext
							}
							this.$api.uploadFamilyMemberSound(data).then(res => {
								this.$Show.successJump('设置成功')
							})
						})
					}
					
				})
				
			},
			startluying() {

				if (!this.gushi) {
					return this.$Show.show('请选择上述古诗')
				}
				
				this.luyingdia = true
				
				// this.recorderManager.start({
				// 	duration: 10000, // 录音的最大时长，单位 ms，这里设置为60秒
				// 	sampleRate: 44100, // 采样率
				// 	numberOfChannels: 1, // 录音的声道数
				// 	encodeBitRate: 192000, // 编码码率
				// 	format: 'm4a' // 音频格式
				// });


				// this.isRecording = true;
				// this.recorderManager.onStart(() => {
				// 	console.log('录音开始');
				// });
				// this.recorderManager.onError((err) => {
				// 	console.error('录音错误：', err);
				// });
			},
			confirmVideo(e){
				
				const tempFilePaths = e
				
				var fileName = Date.now() + '_' + Math.round(Math.random() *
					100000000) + '.' + tempFilePaths.substring(tempFilePaths.lastIndexOf(
					'.') + 1)
				
				var familyId = uni.getStorageSync('familyId') ? uni
					.getStorageSync('familyId')[0] : ''
				
				this.uploadUserImage(tempFilePaths, 'image', fileName, familyId, (
					imgUrl) => {
				
					let data = {
						familyMemberId: this.familyMemberId,
						soundFile: imgUrl,
						soundText: this.gushi
					}
					this.$api.uploadFamilyMemberSound(data).then(res => {
						this.$Show.successJump('设置成功')
					})
				})
			},
			
		}
	};
</script>

<style lang="scss">
	.noticelist {
		padding: 20rpx;

		.li {
			margin-bottom: 40rpx;
			font-size: 32rpx;
		}
	}

	.form {
		.title {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			input{
				border: 1px solid #ccc;
				border-radius: 20rpx;
				height: 110rpx;
				line-height: 110rpx;padding: 0 20rpx;
			}
		}

		.list {
			width: 100%;
			border: 1px solid #cccbcb;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10rpx;
			font-size: 32rpx;

			.iconfont {
				margin-left: 30rpx;
			}
		}
	}
	
	.tablist{
		display: flex;
		align-items: center;
		height: 100rpx;
		margin-bottom: 30rpx;
		span{
			height: 100rpx;
			border-bottom: 1px solid #fff;
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
		}
		
		.act{
			border-color: #de4849;
			color: #de4849;
		}
	}

	.uplist {
		display: flex;
		align-items: center;
		margin-top: 60rpx;

		.list {
			width: 100%;

			span {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				background-color: #de4849;
				color: #fff;
				justify-content: center;
				font-size: 32rpx;

			}
		}
	}
</style>